<script setup lang="ts">
import {useRouter} from 'vue-router'
const $router=useRouter()
interface Props{
  order:any
}
const props=defineProps<Props>()
//去支付
function gotoPay() {
  $router.push({
    path:'/orders/pay',
    query:{
      id:props.order._id
    }
  })
}
//取消订单
function cancelOrder() {
  
}
</script>

<template>
  <div
    w:bg="white"
    w:p="x-4 y-8"
  >
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-stretch"
        w:pos="relative"
      >
        <img :src="item.goods_thumb" v-for="(item,idx) in props.order.goods.slice(0,2)" :key="item._id"
          w:w="50"
        />
        <div v-if="props.order.goods.length>2"
          w:w="50"
          w:h="full"
          w:flex="~ nowrap"
          w:align="items-center"
          w:justify="center"
          w:bg="gray-400 opacity-50"
          w:pos="absolute top-0 right-0"
          w:text="6xl white"
        >
          <span>+{{props.order.goods.length-2}}</span>
        </div>
      </div>
      <div>
        <div>
          <span>￥</span>
          <span
            w:text="3xl right"
            w:font="bold"
          >{{props.order._amount}}</span>
        </div>
        <div
          w:text="gray-400 right"
          w:m="y-4"
        >共{{props.order._total}}件</div>
      </div>
    </div>
    <div
      w:flex="~ nowrap"
      w:justify="end"
      w:align="items-center"
      w:space="x-4"
    >
      <div @click="cancelOrder"
        w:w="35"
        w:h="14"
        w:flex="~ nowrap"
        w:justify="center"
        w:align="items-center"
        w:border="1 solid gray-300 rounded-full"
      >取消订单</div>
      <div @click="gotoPay"
        w:w="35"
        w:h="14"
        w:flex="~ nowrap"
        w:justify="center"
        w:align="items-center"
        w:border="1 solid red-500 rounded-full"
        w:text="red-500"
      >去支付</div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>